import React, { useState } from 'react';
import '../../style/kuangjia.css'
import '../../style/main.css'

const localmusic = () => {
  // 使用 useState 管理子页面的显示状态
  const [activePage, setActivePage] = useState('localsong');

  // 切换子页面
  const showPage = (page) => {
    setActivePage(page);
  };

  return (
    <div className="page">
      <div className="local_top">
        <p className="titl">本地和下载</p>
        <div className="songs_nav">
          <div className="songs_nav_li">
            <ul>
              <li onClick={() => showPage('localsong')} className={activePage === 'localsong' ? 'click2' : ''}>本地歌曲</li>
              <li onClick={() => showPage('downloadsong')} className={activePage === 'downloadsong' ? 'click2' : ''}>下载歌曲</li>
              <li onClick={() => showPage('downloadvedio')} className={activePage === 'downloadvedio' ? 'click2' : ''}>下载视频</li>
              <li onClick={() => showPage('downloadprogress')} className={activePage === 'downloadprogress' ? 'click2' : ''}>正在下载</li>
            </ul>
          </div>
          <div className="songs_nav_li">
            <ul>
              <li>下载历史漫游</li>
              <li>付费下载详情</li>
              <li>更多<i></i></li>
            </ul>
          </div>
        </div>
      </div>
      <div className="local_main">
        {activePage === 'localsong' && (
          <div id="localsong" className="page2">
            <img src="src/img/no_have.png" alt="没有本地歌曲" />
            <p>没有本地歌曲</p>
          </div>
        )}
        {activePage === 'downloadsong' && (
          <div id="downloadsong" className="page2">
            <img src="src/img/no_have.png" alt="没有下载歌曲" />
            <p>没有下载歌曲</p>
          </div>
        )}
        {activePage === 'downloadvedio' && (
          <div id="downloadvedio" className="page2">
            <img src="src/img/no_have.png" alt="没有下载视频" />
            <p>没有下载视频</p>
          </div>
        )}
        {activePage === 'downloadprogress' && (
          <div id="downloadprogress" className="page2">
            <img src="src/img/no_have.png" alt="暂无下载任务" />
            <p>暂无下载任务</p>
          </div>
        )}
      </div>
    </div>
  );
};

export default localmusic;
